<template>
    <view class="pub_page pub_mine">
        <image class="bg_img" mode="widthFix" :src="standing == 'user' ? bg_user : bg_manage" />
        <pub-head headerName="mine" :headerConfig="headerConfig"></pub-head>
        <div class="page_box page_box_scroll" :style="{ 'height': `calc(100vh - ${headerHeight})` }">
            <view class="mine_user" v-if="standing == 'user'">
                <div class="user_div">
                    <div class="headimg" v-if="deviceType == 'mp-alipay'">
                        <image class="img" mode="aspectFill" :src="userInfo.avatar" />
                    </div>
                    <button v-if="deviceType == 'mp-weixin'" class="headimg" open-type="chooseAvatar"
                        @chooseavatar="chooseAvatar">
                        <div class="txt">更换头像</div>
                        <image class="img" mode="aspectFill" :src="userInfo.avatar" />
                    </button>
                    <div class="text">
                        <div class="p_1">{{ userInfo.username }}</div>
                        <div class="p_2">
                            <div class="span">用户</div>
                            <div class="span">{{ $comFun.replaceMobile(userInfo.phone) }}</div>
                        </div>
                    </div>
                </div>
                <div class="nums_div">
                    <div class="li">
                        <div class="p_1">{{ userInfo.amount || 0 }}</div>
                        <div class="p_2">我的余额(元)</div>
                    </div>
                    <div class="li">
                        <div class="p_1">{{ userInfo.last_month_payment || 0 }}</div>
                        <div class="p_2">上月缴费(元)</div>
                    </div>
                </div>
                <div class="tools_div">
                    <div class="li" @click="$comFun.openWin('/pages/mine/message')">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_21.png" />
                        消息通知
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                    <button v-if="deviceType == 'mp-weixin'" class="li" type="default" open-type="contact">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_22.png" />
                        消息客服
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </button>
                    <div class="li" @click="$comFun.openWin('/pages/mine/set')">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_23.png" />
                        通用设置
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                </div>
            </view>
            <view class="mine_user mine_manage" v-if="standing == 'manage' && userInfo">
                <div class="user_div">
                    <div class="headimg" v-if="deviceType == 'mp-alipay'">
                        <image class="img" mode="aspectFill" :src="userInfo.avatar" />
                    </div>
                    <button class="headimg" v-if="deviceType == 'mp-weixin'" open-type="chooseAvatar"
                        @chooseavatar="chooseAvatar">
                        <div class="txt">更换头像</div>
                        <image class="img" mode="aspectFill" :src="userInfo.avatar" />
                    </button>
                    <div class="text">
                        <div class="p_1">{{ userInfo.username }}</div>
                        <div class="p_2">
                            <div class="span">管理</div>
                            <div class="span">{{ $comFun.replaceMobile(userInfo.phone) }}</div>
                        </div>
                    </div>
                </div>
                <div class="tools_div">
                    <div class="li" @click="$comFun.openWin('/pages/manage/contract')">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_25.png" />
                        签约认证
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                        <div class="right_txt">认证后D+1自动提现</div>
                    </div>
                    <div class="li" @click="$comFun.openWin('/pages/manage/manage_list', { openType: 1 })">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_26.png" />
                        收费方案
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                    <div class="li" @click="$comFun.openWin('/pages/manage/manage_list', { openType: 2 })">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_27.png" />
                        预警方案
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                    <div class="li" @click="$comFun.openWin('/pages/manage/manage_list', { openType: 3 })">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_28.png" />
                        用户管理
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                    <div class="li" @click="$comFun.openWin('/pages/manage/manage_list', { openType: 4 })">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_29.png" />
                        区域管理
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                    <button v-if="deviceType == 'mp-weixin'" class="li" type="default" open-type="contact">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_22.png" />
                        消息客服
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </button>
                    <!-- <contact-button v-if="deviceType == 'mp-alipay'" tnt-inst-id="企业编码" scene="聊天窗编码">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_22.png" />
                        消息客服
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </contact-button> -->
                    <div class="li" @click="$comFun.openWin('/pages/mine/set')">
                        <image class="icon" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_23.png" />
                        通用设置
                        <image class="right" mode="aspectFit"
                            src="https://sppcp-1322907932.cos.ap-beijing.myqcloud.com/app/img_24.png" />
                    </div>
                </div>
            </view>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            headerConfig: {
                title: '个人中心',//标题栏内容
                title_color: '#fff',
                left_content: '',
            },
            headerHeight: getApp().globalData.headerHeight,
            standing: this.$store.state.standing,
            deviceType: getApp().globalData.deviceType,

            userInfo: '',

            bg_user: '',
            bg_manage: '',
        };
    },
    onLoad() { },
    onShow() {
        if (this.$store.state.standing == 'user') {
            const bg_user = uni.getStorageSync('bg_user');
            this.bg_user = bg_user ? bg_user : this.$store.state.bg_normal_user;
        } else if (this.$store.state.standing == 'manage') {
            const bg_manage = uni.getStorageSync('bg_manage');
            this.bg_manage = bg_manage || this.$store.state.bg_normal_manage;
        }
        this.getUserCenterInfo();
    },
    methods: {
        async chooseAvatar(e) {
            const that = this;
            console.log(e.detail.avatarUrl);
            let avatarUrl = e.detail.avatarUrl;
            let uploadRes = await that.$request.uploadFile(avatarUrl, {
                ocr: 'avatar'
            });
            // console.log(uploadRes);
            if (uploadRes.code == 200) {
                this.getUserCenterInfo();
            } else {
                that.$comFun.toast(uploadRes.msg);
            }
        },
        async getUserCenterInfo() {
            if (this.userInfo == '') {
                this.$comFun.openLoading();
            }
            const res = await this.$request.get('mobile/user_center');
            // console.log(res);
            if (this.userInfo == '') {
                this.$comFun.closeLoading();
            }
            if (res.code == 200) {
                this.userInfo = res.data;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
